import React, { Component } from 'react'
import PropTypes from 'prop-types'

import { nanoid } from 'nanoid'

import './Header.css'

export default class Header extends Component {
  // 对接收的属性进行类型检查
  static propTypes = {
    addTodo: PropTypes.func.isRequired
  }
  handleKeyUp = event => {
    // 1. 获取用户输入的内容
    const {
      keyCode,
      target: { value }
    } = event
    // 2. 判断用户是否按下了回车键
    if (keyCode !== 13) return
    // 3. 如果是回车键，获取用户输入的内容，并且添加到数组中
    if (value.trim() === '') return alert('请输入有效的任务名称')
    this.props.addTodo({
      id: nanoid(),
      name: value,
      done: false
    })
    // 4. 清空输入框内容
    event.target.value = ''
  }
  render () {
    return (
      <div className='todo-header'>
        <input
          onKeyUp={this.handleKeyUp}
          type='text'
          placeholder='请输入你的任务名称，按回车键确认'
        />
      </div>
    )
  }
}
